<template>
  <div class="orders">
    <div class="list">
      <div class="order_title">
        <p>我的订单</p>
      </div>
      <div class="order_name" v-for="itemData in orderlist" :key="itemData.id">
        <van-card
          class="nam"
          v-for="item in JSON.parse(itemData.goods_info)"
          :key="item.id"
          :num="item.num"
          :price="item.price"
          :desc="item.desc"
          :title="item.goods_name"
          :thumb="item.s_goods_photos[0].path"
        >
          <!-- <template #footer>
            <van-button size="mini">再次购买</van-button>
            <van-button size="mini" @clck="delorder">删除订单</van-button>
          </template> -->
        </van-card>
        <div class="ord-del">
          <div class="all_money">
            <p>总价为￥{{ itemData.total_price }}</p>
          </div>
          <div class="btn">
            <van-button size="mini">再次购买</van-button>
            <van-button size="mini" @click="delored(itemData.id)"
              >删除订单</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <Docker :changeClass="'order'" />
  </div>
</template>

<script setup>


import Docker from '../../components/Docker.vue'
import { computed, ref, nextTick, toRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'
let router = useRouter()
let route = useRoute()
import { get, delcar, addToCart, post } from '../../utils/request.js'



let orderlist = ref([])
let shoplist = ref([])
function orderlister () {
  8
  get(`/order?project_id=242`).then(res => {
    console.log(res);
    orderlist.value = res.result.rows
  })
}
orderlister()
// 删除订单
const delored = (id) => {
  let token = sessionStorage.getItem('token')
  delcar(`/order/${id}`, token).then(res => {
    console.log(res);
  })
  orderlister()

}



// </script>

<style lang="scss" scoped>
.list {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  overflow-y: auto;
}

.list {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: rgba(156, 158, 161, 0.17);
}

.order_title {
  text-align: center;
  line-height: 0.44rem;
  height: 0.44rem;
  width: 3.79rem;
  font-size: 0.16rem;
}

.order_name {
  position: relative;
  width: 3.5rem;
  margin: 0.2rem auto;
  border-radius: 0.1rem;
  background-color: skyblue;

  .ord-del {
    display: flex;
    justify-content: space-between;
    margin-top: 0.09rem;
    width: 100%;
    height: 0.25rem;
    line-height: 0.25rem;
    font-size: 0.14rem;
    // text-align: center;
  }

  .nam {
    border-radius: 0.1rem;
  }
}
</style>